<!DOCTYPE html>
{% load static %}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>{{username}}'s Academic Page</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="author" content="xadwell" />
  <style type="text/css">
    @import"../../../static/css/style.css";

.nav_link{
    align="center";
    }
.welcome{
    margin:100px auto;
    width:300px;
    height:100px;
    text-align: center;
    font:italic 2em Georgia, serif;
}
.div_head{
    position:fixed;
    width:1600px;
    height:50px;
    text-align: center;
    z-index:1;
}
.div_head_nav{
    display: inline-block;
    margin:auto;
    width: 200px;
	height: 50px;
	text-align: center;

}
.div_head_nav:hover{
    color: #ffffff;
    cursor:pointer;
}
#edit_form{
display:none;
height: 100%;
width: 100%;
z-index: 10;
filter:Alpha(opacity=10);
}
#whole_page{
height:auto;
width:auto;
}
.edit_div_1 input{
width:100px;
width: fit-content;
}
.edit_div_1{
position:relative;

}
.edit_form{
}
.edit_div_2{
margin:auto auto;
width:fit-content;
height:auto;
}
.edit_div_2 input[type="text"]{
height:40px;
width: 500px;
margin:10px auto;
border:2px solid red;
border-radius:10px;
}
.edit_div_2 input[type="button"],input[type="submit"],input[type="file"]{
height:40px;
width: 150px;
margin:20px auto;
border:2px solid black;
border-radius:10px;
}
.edit_div_2 textarea{
margin:10px auto;
border:2px solid red;
border-radius:10px;
color:blue;
}
.edit_div_2_input{
width: 500px;
height:auto;
margin:auto auto;
}
h1{
align:"center";
color:green;
}

.main{}
      .nav-bar{
      position:fixed;
      float:left;
      width:150px;
      height:800px;
      position:fixed;
      left:100px;
      top:0;
      background-color:#000000;
      }
      .nav-bar-head{
      width:150px;
      height:50px;
      position:relative;
      top:30px;
      background-color:#000000;
      color:#ffffff;
      display: flex;/*实现垂直居中*/
      align-items: center;/*实现水平居中*/
      justify-content: center;
      text-align: justify;
      font:normal bold 25px "youyuan";
      }
      .nav-bar-item{
      width:150px;
      height:60px;
      position:relative;
      top:150px;
      background-color:#000000;
      color:#ffffff;
      display: flex;/*实现垂直居中*/
      align-items: center;/*实现水平居中*/
      justify-content: center;
      text-align: justify;
      font:normal bold 20px "sans-serif";
      }
      .nav-bar-item:hover{
      background-color:#DCDCDC;
      cursor:pointer;
      }
      .content{
      position:relative;
      top:0px;
      left:250px;
      width:1150px;
      background-color:	#FFFFF0;
      opacity:0.9;
      }
      #profile{
      position:relative;
      margin:10px auto;
      margin-top:0px;
      width:1000px;
      }
      .profile-image{
        position:relative;
        margin:auto auto;
        height: 240px;
        width: 240px;
        border-radius:120px;
      }
      .profile-image-head{
        margin-top:40px;
        height: 240px;
        width: 240px;
        border-radius:120px;
      }
      .profile-text{
        margin:auto auto;
        width: 600px;
        text-align:justify;
        text-justify:inter-ideograph;
        font:normal normal 15px "Microsoft YaHei";
      }
      .profile-link{
        margin:10px auto;
        width: 220px;
        text-align:justify;
        text-justify:inter-ideograph;
        font:normal normal 13px "Microsoft YaHei";
      }
      #introduction{
      position:relative;
      top:20px;
      margin:10px auto;
      width:1000px;
      background-color:#B0E0E6;
      }
      .introduction-box{
      position:relative;
      margin:10px 20px;
      width:800px;
      background-color:#B0E0E6;
      }
      #introduction ul{
      position : relative;
      bottom : 10px ;
      }
      #papers{
      position:relative;
      top:10px;
      margin:0px auto;
      width:1000px;
      background-color:#AFEEEE;
      }
       .papers-box{
      position:relative;
      margin:10px 20px;
      width:800px;
      background-color:	#AFEEEE;
      }
      #papers ul{
      position : relative;
      bottom : 10px ;
      }
      #projects{
      position:relative;
      top:10px;
      margin:10px auto;
      width:1000px;
      background-color:#D3D3D3;
      }
      .projects-box{
      position:relative;
      margin:10px 20px;
      width:800px;
      background-color:#D3D3D3;
      }
      #projects ul{
      position : relative;
      bottom : 10px ;
      }
      #awards{
      position:relative;
      top:10px;
      margin:10px auto;
      width:1000px;
      background-color:	#F0F8FF;
      }
      .awards-box{
      position:relative;
      margin:10px 20px;
      width:800px;
      background-color:	#F0F8FF;
      }
      #awards ul{
      position : relative;
      bottom : 10px ;
      }
      #services{
      position:relative;
      top:10px;
      margin:10px auto;
      width:1000px;
      background-color:#FFEFD5;
      }
      .services-box{
      position:relative;
      margin:10px 20px;
      width:800px;
      background-color:#FFEFD5;
      }
      #services ul{
      position : relative;
      bottom : 10px ;
      }
      #records{
      position:relative;
      top:10px;
      margin:10px auto;
      width:1000px;
      background-color:#E0FFFF;
      }
      .records-box{
      position:relative;
      margin:10px 20px;
      width:800px;
      background-color:#E0FFFF;
      }
      #records ul{
      position : relative;
      bottom : 10px ;
      }
      #profile a {
      color:#000000;
      }
      .nav-bar a{
      text-decoration: none;
      color:#ffffff;
      }
      textarea {
      rows:10;
      cols:67;
      }



</style>
    <script type="text/javascript" src="https://api.ghser.com/qinghua?type=js"></script>
    <script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script>
    var num_dict={"intro":0,"proj":0,"paper":0,"award":0,"service":0,"record":0};
    var holder_dict={"intro":"请输入个人简介","proj":"请输入项目详情","paper":"请输入论文详情","award":"请输入获奖详情","service":"请输入服务描述","record":"请输入个人纪录"};
    var holder_time_dict={"proj":"请输入项目时间","paper":"请输入论文时间","award":"请输入论文时间","service":"请输入服务时间","record":"请输入个人纪录时间"};
    var holder_link_dict={"proj":"请输入项目链接","paper":"请输入论文链接","award":"请输入获奖链接","service":"请输入服务链接","record":"请输入个人纪录链接"};
    var holder_title_dict={"proj":"请输入项目标题","paper":"请输入论文标题","award":"请输入获奖标题","service":"请输入服务标题","record":"请输入个人纪录标题"};
    var holder_people_dict={"proj":"请输入项目人员","paper":"请输入论文人员","award":"请输入获奖人员","service":"请输入服务人员","record":"请输入个人纪录人员"};
    function openEdit(){
        document.getElementById('edit_form').style.display='block';
        document.getElementById('whole_page').style.display='none';
    }
    function closeEdit(){
        alert("是否保存编辑？");
        document.getElementById('edit_form').style.display='none';
        document.getElementById('whole_page').style.display='block';
    }

    function deleteTextInput(label){
    if(num_dict[label]>0){
    if(label!="intro"){
    if(label!="record"){
    if(label!="service"){
    var textInput_people=document.getElementsByName(label+"_people_"+num_dict[label]);
    textInput_people[0].remove();
    }
    var textInput_link=document.getElementsByName(label+"_link_"+num_dict[label]);
    textInput_link[0].remove();
    }
    var textInput_title=document.getElementsByName(label+"_title_"+num_dict[label]);
    var textInput_time=document.getElementsByName(label+"_time_"+num_dict[label]);
    textInput_title[0].remove();
    textInput_time[0].remove();
    }
    var textInput=document.getElementsByName(label+"_"+num_dict[label]);
    textInput[0].remove();
    num_dict[label]=num_dict[label]-1;
    }
    var num_display=document.getElementById(label+"_num");
    num_display.setAttribute('value',num_dict[label]);
    }

    function addTextInput(label){
    var temp = document.getElementById(label+"_add_div");
    var textInput= document.createElement('textarea');
    textInput.setAttribute('name',label+"_"+(num_dict[label]+1));
    textInput.setAttribute('rows', 10);
    textInput.setAttribute('cols', 67);
    textInput.setAttribute('placeholder',holder_dict[label]);

    var textInput_time= document.createElement('input');
    textInput_time.setAttribute('type','text');
    textInput_time.setAttribute('name',label+"_time_"+(num_dict[label]+1));
    textInput_time.setAttribute('placeholder',holder_time_dict[label] );
    var textInput_title= document.createElement('input');
    textInput_title.setAttribute('type','text');
    textInput_title.setAttribute('name',label+"_title_"+(num_dict[label]+1));
    textInput_title.setAttribute('placeholder',holder_title_dict[label] );
    var textInput_link= document.createElement('input');
    textInput_link.setAttribute('type','text');
    textInput_link.setAttribute('name',label+"_link_"+(num_dict[label]+1));
    textInput_link.setAttribute('placeholder',holder_link_dict[label] );
    var textInput_people= document.createElement('input');
    textInput_people.setAttribute('type','text');
    textInput_people.setAttribute('name',label+"_people_"+(num_dict[label]+1));
    textInput_people.setAttribute('placeholder',holder_people_dict[label] );
    if(label!="intro"){
    if(label!="record"){
    if(label!="service"){
    temp.insertBefore(textInput_people,null);
    }
    temp.insertBefore(textInput_link,null);
    }
    temp.insertBefore(textInput_time,null);
    temp.insertBefore(textInput_title,null);
    }
    temp.insertBefore(textInput,null);
    num_dict[label]=num_dict[label]+1;
    var num_display=document.getElementById(label+"_num");
    num_display.setAttribute('value',num_dict[label]);
    }
    function showImg(){
    // var img_file =  $("#img_file").val();
    var file =  document.getElementById('img_head').files[0];
    var re = new FileReader();
    re.readAsDataURL(file);
    re.onload = function(re){
        $('#profile-image-head').attr("src", re.target.result);
    }
    }
    </script>

</head>

<body background="https://api.ixiaowai.cn/gqapi/gqapi.php" style="background-attachment:fixed;">
<div id="whole_page">
{% if request.session.username or request.COOKIES.username%}
<div class="div_head">
    <div class="div_head_nav" onclick="window.location.href='../note/notelist'">
            <h3 class="nav_link">
                进入博客列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../acdlist/acdlist'">
            <h3 class="nav_link">
                进入学术主页列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../note/mynote'">
            <h3 class="nav_link">
                查看我的博客
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../academy/mysite'">
            <h3 class="nav_link">
                查看我的个人主页
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../user/exit'">
            <h3 class="nav_link">
               退出登录
            </h3>
    </div>
</div>
{% else %}
<div class="div_head">
    <div class="div_head_nav" onclick="window.location.href='../note/notelist'">
            <h3 class="nav_link">
                进入博客列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../acdlist/acdlist'">
            <h3 class="nav_link">
                进入学术主页列表
            </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../user/login'">
        <h3 class="nav_link">
                登录
        </h3>
    </div>
    <div class="div_head_nav" onclick="window.location.href='../user/reg'">
        <h3 class="nav_link">
        注册
        </h3>
    </div>
</div>
{%endif%}
<div class="main" id="main">
    <div class="nav-bar">
        <div class="nav-bar-head">
            {{page.name}}
        </div>
        <div class="nav-bar-item">
            <a href="#profile">
                Profile
            </a>
        </div>
        <div class="nav-bar-item">
            <a href="#introduction">
                Introduction
            </a>
        </div>
        <div class="nav-bar-item">
            <a href="#projects">
                Project
            </a>
        </div>
        <div class="nav-bar-item">
            <a href="#papers">
                Paper
            </a>
        </div>
        <div class="nav-bar-item">
            <a href="#awards">
                Award
            </a>
        </div>
        <div class="nav-bar-item">
            <a href="#services">
                Service
            </a>
        </div>
        <div class="nav-bar-item">
            <a href="#records">
                Record
            </a>
        </div>
    </div>
    <div class="content" >
        <div id="profile" >
            <div class="profile-image">
                    <!--         图片放在这里       -->
                <img class="profile-image-head" src="{{page.pic}}"/>
            </div>
            <h1 align="center" style="position:relative;margin-top:40px;">
                {{page.name}}
                {% if search_name == name %}
                <input type="button" onclick="openEdit()" value="编辑">
                {%endif%}
            </h1>
            <div class="profile-text" >
                {{page.introduction}}
            </div>
            <div class="profile-link">
                <a href="tel:{{page.phone_link}}"  target="_blank" >phone</a>/
                <a href="mailto:{{page.email_link}}"  target="_blank" >Email</a>/
                <a href="//{{page.github_link}}"  target="_blank" >Github</a>/
                <a href="//{{page.zhihu_link}}"  target="_blank" >ZhiHu</a>/
                <a href={{page.blog_link}}>Blog</a>
            </div>
        </div>
        <div id="introduction">
            <h2>
                &emsp; Introduction
            </h2>
            <div class="introduction-box">
                <ul type="disc">
                {% for intro in intros %}
                <li>{{intro.description}}</li>
                {% endfor %}
                </ul>
            </div>
        </div>
        <div id="projects">
            <h2>
                &emsp; Project
            </h2>
            <div class="projects-box">
                <ul type="disc">
                {% for proj in projects %}
                    <li> {{proj.time}} <a href={{proj.link}} target="_blank">{{proj.title}}</a> {{proj.auther_list}}
                        <p>{{proj.description}}</p>
                    </li>
                {% endfor %}
                </ul>
            </div>

        </div>
        <div id="papers">
             <h2>
                &emsp;Paper
            </h2>
            <div class="papers-box">
                <ul type="disc">
                {% for paper in papers %}
                <li>{{paper.time}} <a href={{paper.link}} target="_blank">{{paper.title}}</a> {{paper.auther_list}}
                    <p>{{paper.description}}</p>
                </li>
                {% endfor %}
                </ul>
            </div>

        </div>
        <div id="awards">
            <h2>
                &emsp;Award
            </h2>
            <div class="awards-box">
                <ul type="disc">
                {% for award in awards %}
                <li>{{award.time}} <a href={{award.link}} target="_blank">{{award.title}}</a> {{award.auther_list}}
                    <p>{{award.description}}</p>
                </li>
                {% endfor %}
                </ul>
            </div>
        </div>
        <div id="services">
            <h2>
                &emsp;Service
            </h2>
            <div class="services-box">
                <ul type="disc">
                {% for service in services %}
                <li>{{service.time}} <a href={{service.link}} target="_blank">{{service.title}}</a>
                    <p>{{service.description}}</p>
                </li>
                {% endfor %}
                </ul>
            </div>

        </div>
        <div id="records">
            <h2>
                &emsp;Record
            </h2>
            <div class="records-box">
                <ul type="disc">
                {% for record in records %}
                    <li>{{record.time}} {{record.title}}
                        <p>{{record.description}}</p>
                    </li>
                {% endfor %}
                </ul>
            </div>

        </div>
    </div>
</div>
</div>
<div id="edit_form">
    <form action="mysite" method="post" enctype="multipart/form-data">
        <div class="edit_div_1">
            <div class="edit_div_2">
                <h1>
                    编辑个人Profile
                 </h1>
                <div class="profile-image">
                <img id="profile-image-head" class="profile-image-head" src="{{page.pic}}"/>
                </div>
                <div class="profile-image">
                    <input type="file" onchange="showImg()" id="img_head" name="img_head" value="点击上传头像">
                </div>
                <div class="edit_div_2_input">
                    <textarea rows="10" cols="67" name="profile" placeholder="请输入个人简介"></textarea>
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="name" placeholder="请输入主页显示名称" value="{{page.name}}">
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="major" placeholder="请输入专业" value="{{page.major}}">
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="zhihu_link" placeholder="请输入知乎主页链接" value="{{page.zhihu_link}}">
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="blog_link" placeholder="请输入博客主页链接" value="{{page.blog_link}}">
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="github_link" placeholder="请输入Github主页链接" value="{{page.github_link}}">
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="email_link" placeholder="请输入邮箱地址" value="{{page.email_link}}">
                </div>
                <div class="edit_div_2_input">
                    <input type="text" name="phone_link" placeholder="请输入电话号码" value="{{page.phone_link}}">
                </div>

            </div>
            <div class="edit_div_2">
                <h1>
                    编辑个人Introduction
                </h1>
                <div class="edit_div_2_input">
                    <div id="intro_add_div"></div>
                    <input type="button" id="intro_add" onclick="addTextInput('intro')" value="添加一项">
                    <input type="text" id="intro_num" name="intro_num" value="0" style="height:40px;width:150px;font-size:30px;color:green;">
                    <input type="button" id="intro_delete" onclick="deleteTextInput('intro')" value="删除一项">
                </div>
            </div>
            <div class="edit_div_2">
                <h1>
                    编辑个人Project
                </h1>
                <div class="edit_div_2_input">
                    <div id="proj_add_div"></div>
                    <span>
                        <input type="button" id="proj_add" onclick="addTextInput('proj')" value="添加一项">
                        <input type="text" id="proj_num" name="proj_num"  value="0" style="height:40px;width:100px;font-size:30px;color:green;">
                        <input type="button" id="proj_delete" onclick="deleteTextInput('proj')" value="删除一项">
                    </span>

                </div>
            </div>
            <div class="edit_div_2">
                <h1>
                    编辑个人Paper
                </h1>
                <div class="edit_div_2_input">
                    <div id="paper_add_div"></div>
                    <input type="button" id="paper_add" onclick="addTextInput('paper')" value="添加一行">
                    <input type="text" id="paper_num" name="paper_num"  value="0" style="height:40px;width:100px;font-size:30px;color:green;">
                    <input type="button" id="paper_delete" onclick="deleteTextInput('paper')" value="删除一项">
                </div>
            </div>
            <div class="edit_div_2">
                <h1>
                    编辑个人Award
                </h1>
                <div class="edit_div_2_input">
                    <div id="award_add_div"></div>
                    <input type="button" id="award_add" onclick="addTextInput('award')" value="添加一项">
                    <input type="text" id="award_num" name="award_num"  value="0" style="height:40px;width:100px;font-size:30px;color:green;">
                    <input type="button" id="award_delete" onclick="deleteTextInput('award')" value="删除一项">
                </div>
            </div>
            <div class="edit_div_2">
                <h1>
                    编辑个人Service
                </h1>
                <div class="edit_div_2_input">
                    <div id="service_add_div"></div>
                    <input type="button" id="service_add" onclick="addTextInput('service')" value="添加一项">
                    <input type="text" id="service_num" name="service_num"  value="0" style="width:100px;height:40px;font-size:30px;color:green;">
                    <input type="button" id="service_delete" onclick="deleteTextInput('service')" value="删除一项">
                </div>
            </div>
            <div class="edit_div_2">
                <h1>
                    编辑个人Record
                </h1>
                <div class="edit_div_2_input">
                    <div id="record_add_div"></div>
                    <input type="button" id="record_add" onclick="addTextInput('record')" value="添加一项">
                    <input type="text" id="record_num" name="record_num"  value="0" style="width:100px;height:40px;font-size:30px;color:green;">
                    <input type="button" id="record_delete" onclick="deleteTextInput('record')" value="删除一项">
                </div>
                <div class="edit_div_2_input">
                    <input type="button" ID="" onclick="closeEdit()" value="退出编辑">
                    <input type="submit"  value="保存并提交">
                </div>
            </div>
        </div>
    </form>

</div>
</body>
<script>
    document.getElementsByName("profile")[0].value= "{{page.introduction}}";
    {%for vv in intros%}
    var num={{forloop.counter}};
    addTextInput("intro");
    console.log("intro_"+num);
    document.getElementsByName("intro_"+num)[0].value= "{{vv.description}}";
    {%endfor%}

    {%for vv in papers%}
    var num={{forloop.counter}};
    addTextInput("paper");
    document.getElementsByName("paper_"+num)[0].value= "{{vv.description}}";
    document.getElementsByName("paper_time_"+num)[0].value="{{vv.time}}";
    document.getElementsByName("paper_title_"+num)[0].value="{{vv.title}}";
    document.getElementsByName("paper_link_"+num)[0].value="{{vv.link}}";
    document.getElementsByName("paper_people_"+num)[0].value="{{vv.auther_list}}";
    {%endfor%}

    {%for vv in projects%}
    var num={{forloop.counter}};
    addTextInput("proj");
    document.getElementsByName("proj_"+num)[0].value= "{{vv.description}}";
    document.getElementsByName("proj_time_"+num)[0].value="{{vv.time}}";
    document.getElementsByName("proj_title_"+num)[0].value="{{vv.title}}";
    document.getElementsByName("proj_link_"+num)[0].value="{{vv.link}}";
    document.getElementsByName("proj_people_"+num)[0].value="{{vv.auther_list}}";
    {%endfor%}

    {%for vv in awards%}
    var num={{forloop.counter}};
    addTextInput("award");
    document.getElementsByName("award_"+num)[0].value= "{{vv.description}}";
    document.getElementsByName("award_time_"+num)[0].value="{{vv.time}}";
    document.getElementsByName("award_title_"+num)[0].value="{{vv.title}}";
    document.getElementsByName("award_link_"+num)[0].value="{{vv.link}}";
    document.getElementsByName("award_people_"+num)[0].value="{{vv.auther_list}}";
    {%endfor%}

    {%for vv in services%}
    var num={{forloop.counter}};
    addTextInput("service");
    document.getElementsByName("service_"+num)[0].value= "{{vv.description}}";
    document.getElementsByName("service_time_"+num)[0].value="{{vv.time}}";
    document.getElementsByName("service_title_"+num)[0].value="{{vv.title}}";
    document.getElementsByName("service_link_"+num)[0].value="{{vv.link}}";
    {%endfor%}

    {%for vv in records%}
    var num={{forloop.counter}};
    addTextInput("record");
    document.getElementsByName("record_"+num)[0].value= "{{vv.description}}";
    document.getElementsByName("record_time_"+num)[0].value="{{vv.time}}";
    document.getElementsByName("record_title_"+num)[0].value="{{vv.title}}";
    {%endfor%}


</script>
<script>
   $(document).ready(function(){
   var a_idx = 0;
   $("body").click(function(e){
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 1024,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
   });

});
</script>
</html>


